<template>
    <div>
        <h2>房型添加</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>
                        <input type="text"  v-model="houseType.HouseTypeName"/>
                    </td>
                </tr>



                <tr>
                    <td>售价</td>
                    <td>

                        <input type="text"  v-model="houseType.Price" />
                    </td>
                </tr>



                <tr>
                    <td>面积</td>
                    <td>
                        <input type="text"   v-model="houseType.MianJi"/>
                    </td>
                </tr>


                <tr>
                    <td>可住人数</td>
                    <td>
                        <input type="text"  v-model="houseType.NumCount" />
                    </td>
                </tr>


                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="changeImg" />
                        <img :src="houseType.Phone" alt="" width="100" height="100" />
                    </td>
                </tr>


                <tr>
                    <td>房型介绍</td>
                    <td>
                        <textarea cols="30" rows="10"   v-model="houseType.JieShao"></textarea>
                    </td>
                </tr>


                <tr>
                    <td>是否加床</td>
                    <td>
                        <input type="radio" name="isAddBed" value="1"   v-model="houseType.State"/>是
                        <input type="radio" name="isAddBed" value="0"   v-model="houseType.State"/>否
                    </td>
                </tr>


                <tr>
                    <td>是否含早餐</td>
                    <td>
                        <input type="radio" name="zaocan" value="1"   v-model="houseType.ZaoCan"/>含早餐
                        <input type="radio" name="zaocan" value="0"   v-model="houseType.ZaoCan"/>不含早餐
                    </td>
                </tr>




                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-success" @click="ok" />
                    </td>
                </tr>



            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">


import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()



//图片上传
const changeImg = (e: any) => {

    let obj = e.target.files[0]
    let f = new FormData()
    f.append('file', obj)
    axios({
        url: 'https://localhost:7059/api/HouseType/UpFiles',
        method: 'post',
        data: f
    }).then((res) => {
        console.log(res)
        houseType.Phone = res.data
    })
        .catch((err) => {
            console.log(err)
        })



}





let houseType = reactive({
    "HouseTypeName": '',
    "Price": '',
    "MianJi": '',
    "NumCount": '',
    "Phone": '',
    "JieShao": '',
    "State": 1,
    "ZaoCan": 1,

})



//添加
const ok = () => {
    axios({
        url: 'https://localhost:7059/api/HouseType/HouseTypeAdd',
        method: 'post',
        data: houseType
    }).then((res) => {
        console.log(res)
         if(res.data>0){
            alert('添加成功')
            router.push('/houseTypeList')
            return;
         }
         else   {
            alert('添加失败')
            return;
         }
    })
        .catch((err) => {
            console.log(err)
        })
}


</script>

<style scoped></style>